'use client';

import { useState, useEffect } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import { useRouter } from 'next/navigation';
import Link from 'next/link';


interface DashboardStats {
  totalCars: number;
  activeCars: number;
  soldCars: number;
  totalUsers: number;
  totalBrands: number;
  recentActivity: Array<{
    id: string;
    type: 'car_added' | 'car_sold' | 'user_registered';
    message: string;
    time: string;
  }>;
}

export default function AdminPage() {
  const { user } = useAuth();
  const router = useRouter();
  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  // 模拟仪表板数据
  const mockStats: DashboardStats = {
    totalCars: 156,
    activeCars: 89,
    soldCars: 67,
    totalUsers: 234,
    totalBrands: 15,
    recentActivity: [
      { id: '1', type: 'car_added', message: '新增车辆: 特斯拉 Model Y', time: '2小时前' },
      { id: '2', type: 'car_sold', message: '车辆已售: 奔驰 E-Class', time: '4小时前' },
      { id: '3', type: 'user_registered', message: '新用户注册: user123', time: '6小时前' },
      { id: '4', type: 'car_added', message: '新增车辆: 宝马 X5', time: '1天前' },
      { id: '5', type: 'car_sold', message: '车辆已售: 奥迪 A4', time: '1天前' },
    ]
  };

  useEffect(() => {
    // 检查用户权限
    if (!user || user.role !== 'admin') {
      router.push('/login');
      return;
    }

    // 模拟加载数据
    setTimeout(() => {
      setStats(mockStats);
      setIsLoading(false);
    }, 1000);
  }, [user, router]);

  if (!user || user.role !== 'admin') {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">无权限访问</h2>
          <p className="text-gray-600 mb-4">请使用管理员账号登录</p>
          <Link href="/login" className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
            前往登录
          </Link>
        </div>
      </div>
    );
  }

  return (
    <>
      {/* Header */}
      <div className="mb-8">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">管理仪表板</h1>
            <p className="text-gray-600">欢迎回来, {user.username}</p>
          </div>
          <div className="text-sm text-gray-500">
            最后更新: {new Date().toLocaleString('zh-CN')}
          </div>
        </div>
      </div>

      {isLoading ? (
        <div className="p-8 text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">加载中...</p>
        </div>
      ) : (
        <>
          {/* Stats Cards */}
          <div className="grid grid-cols-1 md:grid-cols-5 gap-6 mb-8">
            <div className="bg-blue-50 rounded-lg shadow-sm p-6 border border-blue-100">
              <div className="flex items-center">
                <div className="text-3xl mr-4">🚗</div>
                <div>
                  <div className="text-2xl font-bold text-blue-600">{stats?.totalCars}</div>
                  <div className="text-gray-600">总车辆数</div>
                </div>
              </div>
            </div>
            <div className="bg-green-50 rounded-lg shadow-sm p-6 border border-green-100">
              <div className="flex items-center">
                <div className="text-3xl mr-4">✅</div>
                <div>
                  <div className="text-2xl font-bold text-green-600">{stats?.activeCars}</div>
                  <div className="text-gray-600">在售车辆</div>
                </div>
              </div>
            </div>
            <div className="bg-red-50 rounded-lg shadow-sm p-6 border border-red-100">
              <div className="flex items-center">
                <div className="text-3xl mr-4">💰</div>
                <div>
                  <div className="text-2xl font-bold text-red-600">{stats?.soldCars}</div>
                  <div className="text-gray-600">已售车辆</div>
                </div>
              </div>
            </div>
            <div className="bg-purple-50 rounded-lg shadow-sm p-6 border border-purple-100">
              <div className="flex items-center">
                <div className="text-3xl mr-4">👥</div>
                <div>
                  <div className="text-2xl font-bold text-purple-600">{stats?.totalUsers}</div>
                  <div className="text-gray-600">总用户数</div>
                </div>
              </div>
            </div>
            <div className="bg-orange-50 rounded-lg shadow-sm p-6 border border-orange-100">
              <div className="flex items-center">
                <div className="text-3xl mr-4">🏷️</div>
                <div>
                  <div className="text-2xl font-bold text-orange-600">{stats?.totalBrands}</div>
                  <div className="text-gray-600">汽车品牌</div>
                </div>
              </div>
            </div>
          </div>

          {/* Quick Actions */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <Link
              href="/admin/cars"
              className="bg-white rounded-lg shadow-sm p-6 border hover:shadow-md transition-shadow"
            >
              <div className="flex items-center">
                <div className="text-2xl mr-4">🚗</div>
                <div>
                  <div className="font-semibold text-gray-900">汽车管理</div>
                  <div className="text-sm text-gray-600">管理车辆信息</div>
                </div>
              </div>
            </Link>
            <Link
              href="/admin/users"
              className="bg-white rounded-lg shadow-sm p-6 border hover:shadow-md transition-shadow"
            >
              <div className="flex items-center">
                <div className="text-2xl mr-4">👥</div>
                <div>
                  <div className="font-semibold text-gray-900">用户管理</div>
                  <div className="text-sm text-gray-600">管理用户账户</div>
                </div>
              </div>
            </Link>
            <Link
              href="/admin/brands"
              className="bg-white rounded-lg shadow-sm p-6 border hover:shadow-md transition-shadow"
            >
              <div className="flex items-center">
                <div className="text-2xl mr-4">🏷️</div>
                <div>
                  <div className="font-semibold text-gray-900">品牌管理</div>
                  <div className="text-sm text-gray-600">管理汽车品牌</div>
                </div>
              </div>
            </Link>
            <Link
              href="/admin/configs"
              className="bg-white rounded-lg shadow-sm p-6 border hover:shadow-md transition-shadow"
            >
              <div className="flex items-center">
                <div className="text-2xl mr-4">⚙️</div>
                <div>
                  <div className="font-semibold text-gray-900">系统配置</div>
                  <div className="text-sm text-gray-600">系统参数设置</div>
                </div>
              </div>
            </Link>
          </div>

          {/* Recent Activity */}
          <div className="bg-white rounded-lg shadow-sm overflow-hidden border">
            <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
              <h2 className="text-xl font-semibold text-gray-900">最近活动</h2>
            </div>
            <div className="p-6">
              <div className="space-y-4">
                {stats?.recentActivity.map((activity) => (
                  <div key={activity.id} className="flex items-center space-x-4">
                    <div className={`w-2 h-2 rounded-full ${
                      activity.type === 'car_added' ? 'bg-green-500' :
                      activity.type === 'car_sold' ? 'bg-blue-500' :
                      'bg-purple-500'
                    }`}></div>
                    <div className="flex-1">
                      <div className="text-sm text-gray-900">{activity.message}</div>
                    </div>
                    <div className="text-xs text-gray-500">{activity.time}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </>
      )}
    </>
  );
}